<template>
	<view class="every-riddle">
		<view>
			<view class="riddle-subject">
				<!-- 有图 -->
				<view class="riddle-topic" v-if="subList.image_path != null&&subList.image_path != ''">
					<view>
						{{subList.title}}
					</view>
					<view></view>
					<image :src="subList.image_path" mode="" style="width: 100%;height: 354upx;margin-top: 10upx;"></image>
				</view>
				<!-- 无图 -->
				<view class="riddle-topic riddle-subject-no-photo" v-else>
					{{subList.title}}
				</view>
				<view :class="subList.image_path!=null&&subList.image_path!=''?'tip-answer tip-answer-photo':'tip-answer'" style="display: flex;justify-content: space-between;">
					<view>
						<text>解谜成功即可赢取<text style="color: #FF5C46;">“幸运福袋”</text></text>
					</view>
					<!-- <view @click="tipAnswer">
						<view style="width: 64upx;height: 64upx;margin: 0 auto;position: relative;">
							<image :src="tip_icon" mode="" style="width: 64upx;height: 64upx;"></image>
							<view class="riddle-tip">
								1
							</view>
						</view>
						<view style="font-size: 22upx;color: #00A66A;">
							提示答案
						</view>
					</view> -->
				</view>
			</view>
			<view class="riddle-result">
				<view class="riddle-choose-result" @click="chooseKey(subList.option_first.id,subList.user_top_id,'1')" :class="[riddleResultFitst == 1?'riddle-choose-correct':riddleResultFitst == 0?'riddle-choose-error':'']">
					<image v-if="riddleResultFitst == index" v-for="(item,index) in riddleResultImg" :key="index" :src="item" class="icon-img"></image>
					{{subList.option_first.content}}
				</view>
				<view class="riddle-choose-result" @click="chooseKey(subList.option_second.id,subList.user_top_id,'2')" :class="[riddleResult == 1?'riddle-choose-correct':'',riddleResult == 0?'riddle-choose-error':'']">
					{{subList.option_second.content}}
					<image v-if="riddleResult == index" v-for="(item,index) in riddleResultImg" :key="index" :src="item" class="icon-img"></image>
				</view>
				<view class="riddle-choose-result" @click="chooseKey(subList.option_third.id,subList.user_top_id,'3')" :class="[riddleResultThird == 0?'riddle-choose-error':'',riddleResultThird == 1?'riddle-choose-correct':'']">
					{{subList.option_third.content}}
					<image v-if="riddleResultThird == index" v-for="(item,index) in riddleResultImg" :key="index" :src="item" class="icon-img"></image>
				</view>
			</view>
		</view>
		<!-- 退出提示答题 -->
		<uni-popup ref='popupBack' :custom="true">
			<view class="back_box">
				<view class="back_top">
					<view class="back_top_title">
						退出今日解谜
					</view>
					<view class="back_top_tip">
						确定要退出今日解谜吗？
					</view>
				</view>
				<view class="back_bottom">
					<view class="back_cancle" @click="closeBackClick">
						取消
					</view>
					<view class="back_sure" @click="sureExit">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 答题错误弹框 -->
		<uni-popup ref='popupError' :custom="true">
			<view class="popup_error_de">
				<image :src="close_popup" style="width: 52upx;height: 52upx;position: absolute;top: 0;right: 0;" @click="closeErrorClick"></image>
				<view class="popup_error_contain">
					<view style="font-weight:550;">
						答错了，再给自己1次机会
					</view>
					<view style="margin-top: 38upx;position: relative;">
						<image :src="error_popup_icon" mode="" style="width: 306upx;height: 210upx;margin-left: 80upx;"></image>
						<view class="money_num">
							0~99元
						</view>
					</view>
					<view style="padding-left: 96upx;box-sizing: border-box;padding-top: 10upx;">
						<text>有机会获得随机红包</text>
						<image :src="error_popup_money" mode="" style="width: 50upx;height: 56upx;"></image>
					</view>
					<view class="popup_error_invite" @click="inviteFriend">
						邀请好友获得<text style="color: #FF1E00;">1次</text>机会
					</view>
					<view class="popup_error_abandon_invite" @click="giveUp">
						放弃抢福袋机会
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 解谜成功弹框 -->
		<uni-popup ref='popupSucceed' :custom="true">
			<view class="popup_succeed_de">
				<image :src="close_popup" style="width: 52upx;height: 52upx;position: absolute;top: 0;right: 0;" @click="closeSucceedClick"></image>
				<view class="popup_succeed_de_content">
					<view>
						有机会获得随机红包
					</view>
					<view @click="toLuckyBag">
						立即拆福气
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 解谜提示 -->
		<!-- <uni-popup ref='popupRiddleTip' :custom="true">
			<view class="popup_riddle_de">
				<image :src="close_popup" style="width: 52upx;height: 52upx;position: absolute;top: 0;right: 0;" @click="closeTipClick"></image>
				<view class="popup_riddle_de_content">
					<view style="font-weight:550;">
						解谜提示
					</view>
					<view style="margin-top: 38upx;">
						<image :src="riddle_icon" mode="" style="width: 306upx;height: 210upx;"></image>
					</view>
					<view>
						观看完整视频，为你提示正确答案
					</view>
					<view>
						<image :src="tip_video_icon" mode=""></image>
						<text style="vertical-align: middle;">立即提示</text>
					</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				tip_icon: this.$imgUrl + 'img/riddle/tip_icon.png',
				close_popup: this.$imgUrl + 'img/riddle/close_popup.png',
				error_popup_icon: this.$imgUrl + 'img/riddle/error_popup_icon.png',
				error_popup_money: this.$imgUrl + 'img/riddle/error_popup_money.png',
				riddle_icon: this.$imgUrl + 'img/riddle/riddle_icon.png',
				tip_video_icon: this.$imgUrl + 'img/riddle/tip_video_icon.png',
				subList: {
					title: '',
					image_path: '',
					option_first: {
						content: ''
					},
					option_second: {
						content: ''
					},
					option_third: {
						content: ''
					}
				},
				riddleResult: -1,
				riddleResultFitst: -1,
				riddleResultThird: -1,
				riddleResultImg: [this.$imgUrl + 'img/riddle/answer_error_icon.png', this.$imgUrl +
					'img/riddle/answer_correct_icon.png'
				],
				count: 0,
				token: this.$store.getters.getToken,
				user_id: this.$store.getters.getUserId,
				canRiddleAgain: false,
			}
		},
		onShow() {
			this.canRiddleAgain = this.$store.state.canRiddleAgain
			if(this.canRiddleAgain == false&&this.count==1&&!(this.riddleResult==1||this.riddleResultFitst==1||this.riddleResultThird==1)) {//答错一次没有分享好友弹框询问返回与否
				this.$refs.popupBack.open()
			}else if(!(this.riddleResult==1||this.riddleResultFitst==1||this.riddleResultThird==1)&&this.count==2){//两次都没答对
				uni.navigateBack({})
			}
		},
		onLoad() {
			this.getSubList()
		},
		onHide() {
			this.closeErrorClick()
			this.closeSucceedClick()
		},
		onUnload() {
			this.closeSucceedClick()
			this.closeErrorClick()
		},
		methods: {
			// 放弃机会
			giveUp() {
				this.closeErrorClick()
				this.$refs.popupBack.open()
			},
			// 解谜错误关闭弹框
			closeErrorClick() {
				this.$refs.popupError.close()
			},
			// 解谜成功关闭弹框
			closeSucceedClick() {
				this.$refs.popupSucceed.close()
			},
			// 退出解谜关闭弹框
			closeBackClick() {
				this.$refs.popupBack.close()
				this.$refs.popupError.open()
			},
			// 确定退出今日解谜
			sureExit() {
				this.closeBackClick()
				uni.navigateBack({})
			},
			// 去拆福袋
			toLuckyBag() {
				uni.redirectTo({
					url: './luckyBag/luckyBag'
				})
			},
			// 答错题目分享好友
			inviteFriend() {
				uni.navigateTo({
					url: 'luckyCard/luckyCard?result=fail&count='+this.count+'&user_top_id='+this.subList.user_top_id
				})
			},
			// 获取每日解谜题目
			getSubList() {
				let data = {
					token: this.token,
				}
				this.$api.getRiddleQuestion(data).then(res => {
					console.log('获取每日解谜题目', res)
					if (res.status) {
						this.subList = res.data
						if(this.subList.options.length=3) {
							this.subList.option_first = this.subList.options[0]
							this.subList.option_second = this.subList.options[1]
							this.subList.option_third = this.subList.options[2]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						})
						if(res.have_been_drawn==1) {//可以拆福袋
							this.$refs.popupSucceed.open()
							console.log('可以拆福袋')
						}else{
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
							console.log('不可以拆福袋')
						}
					}
				}).catch(err => {
					console.log('获取每日解谜题目', err)
				})
			},
			// 选择答案
			chooseKey(optionId, questionId, flag) {
				let data = {
					token: this.token,
					user_top_id: questionId,
					id: optionId
				}
				if (this.count == 0||(this.canRiddleAgain&&this.count==1)) {
					this.count = this.count+1
					this.canRiddleAgain = false
					this.$store.commit('updataTodayRidd',false)
					this.$api.getRiddleAnswer(data).then(res => {
						if(res.status) {//答对了
							if(flag == 1) {
								this.riddleResultFitst = 1
							}else if(flag == 2) {
								this.riddleResult = 1
							}else {
								this.riddleResultThird = 1
							}
							this.$refs.popupSucceed.open()
						}else {//答错了
							if(flag == 1) {
								this.riddleResultFitst = 0
							}else if(flag == 2) {
								this.riddleResult = 0
							}else {
								this.riddleResultThird = 0
							}
							if(this.count==1) {
								this.$refs.popupError.open()
							}else {//第二次答错
								uni.navigateTo({
									url: 'luckyCard/luckyCard?result=fail&count='+this.count+'&user_top_id='+questionId
								})
							}
						}
						console.log('选择答案',res)
					}).catch(err => {
						console.log('选择答案',err)
					})
				}
			},
			// 提示答案关闭弹框
			// closeTipClick() {
			// 	this.$refs.popupRiddleTip.close()
			// },
			// 打开答案提示弹框
			// tipAnswer() {
			// 	this.$refs.popupRiddleTip.open()
			// },
		}
	}
</script>

<style>
	.back_box {
		width: 640upx;
		height: 336upx;
		background-color: #fff;
		border-radius: 24upx;
		display: flex;
		flex-direction: column;
	}

	.back_top {
		flex-grow: 1;
		box-sizing: border-box;
		padding: 50upx 48upx 46upx 48upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.back_top_title {
		font-size: 36upx;
		color: #353535;
		font-weight: 550;
	}

	.back_top_tip {
		color: #666666;
		font-size: 30upx;
	}

	.back_bottom {
		flex-grow: 0;
		border-top: 2upx solid #DEDEDE;
		height: 110upx;
		font-size: 34upx;
		line-height: 110upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
		color: #000;
	}

	.back_bottom::before {
		content: '';
		position: absolute;
		height: 110upx;
		background-color: #DEDEDE;
		width: 2upx;
		left: 50%;
	}

	.back_sure {
		color: #576B95;
	}

	.icon-img {
		width: 32upx;
		height: 32upx;
		position: absolute;
		top: 30upx;
		right: 40upx;
	}

	/* 解谜提示语 */
	.popup_riddle_de {
		width: 590upx;
		height: 688upx;
		position: relative;
	}

	.popup_riddle_de_content {
		width: 100%;
		height: 610upx;
		position: absolute;
		top: 72upx;
		left: 0;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 82upx 60upx 80upx;
		box-sizing: border-box;
		text-align: center;
	}

	.popup_riddle_de_content>view:first-child {
		color: #333;
		font-size: 34upx;
		line-height: 48upx;
	}

	.popup_riddle_de_content>view:nth-child(3) {
		font-size: 28upx;
		color: #333;
		line-height: 40upx;
		margin-top: 40upx;
	}

	.popup_riddle_de_content>view:last-child {
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		background: linear-gradient(#CBEC00, #00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(0, 166, 106, 0.4);
		margin-top: 60upx;
		border-radius: 40upx;
	}

	.popup_riddle_de_content>view:last-child>image {
		width: 40upx;
		height: 28upx;
		vertical-align:
			middle;
		margin-right: 10upx;
	}

	/* 解谜成功弹框 */
	.popup_succeed_de {
		height: 892upx;
		width: 590upx;
		position: relative;
	}

	.popup_succeed_de_content {
		width: 100%;
		height: 820upx;
		position: absolute;
		top: 72upx;
		left: 0;
		background: url(https://lightplanet.tuanhaoke.cn/img/riddle/succeed_popup_bg.png);
		background-size: 100% 100%;
		color: #fff;
		text-align: center;
		line-height: 40upx;
		font-size: 28upx;
	}

	.popup_succeed_de_content>view:first-child {
		margin-top: 600upx;
	}

	.popup_succeed_de_content>view:last-child {
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(#FDEB65, #FAB84C);
		box-shadow: 0 8upx 12upx 0 rgba(0, 0, 0, 0.16);
		color: #E02B24;
		margin: 0 auto;
		margin-top: 40upx;
		border-radius: 40upx;
	}

	/* 答题错误弹框 */
	.popup_error_de {
		width: 590upx;
		height: 820upx;
		position: relative;
	}

	.popup_error_contain {
		width: 100%;
		height: 748upx;
		background: #fff;
		border-radius: 16upx;
		position: absolute;
		top: 72upx;
		left: 0;
		padding: 40upx 40upx 72upx 70upx;
		box-sizing: border-box;
	}

	.popup_error_contain>view:first-child {
		color: #333;
		font-size: 34upx;
		line-height: 48upx;
		padding-left: 50upx;
		box-sizing: border-box;
	}

	.popup_error_contain>view:nth-child(3) text {
		color: #FF5C46;
		font-size: 28upx;
		line-height: 40upx;
	}

	.money_num {
		position: absolute;
		bottom: 0;
		right: -4upx;
		background: linear-gradient(#FF8250, #FF3E30);
		width: 120upx;
		height: 40upx;
		border-radius: 36upx 24upx 24upx 0;
		color: #fff;
		font-size: 24upx;
		text-align: center;
		line-height: 40upx;
	}

	.popup_error_invite {
		width: 430upx;
		height: 80upx;
		background: linear-gradient(#CBEC00, #00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(0, 166, 106, 0.4);
		border-radius: 40upx;
		line-height: 80upx;
		text-align: center;
		font-size: 30upx;
		color: #fff;
		margin-top: 60upx;

	}

	.popup_error_abandon_invite {
		width: 430upx;
		height: 80upx;
		background: #F2F2F2;
		border-radius: 40upx;
		line-height: 80upx;
		text-align: center;
		font-size: 30upx;
		margin-top: 40upx;
	}

	.every-riddle {
		width: 100%;
		height: 100%;
		position: fixed;
		background: url(https://lightplanet.tuanhaoke.cn/img/riddle/answer_bg_img.png);
		background-size: 100% 100%;
		padding: 30upx;
		box-sizing: border-box;
	}

	.every-riddle .riddle-subject {
		width: 100%;
		/* height: 626upx; */
		background: #fff;
		border-radius: 16upx;
		padding: 30upx 30upx 10upx 30upx;
		box-shadow: 0 8upx 0 0 #139882;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.riddle-subject .riddle-topic {
		width: 100%;
		height: 465upx;
	}

	.riddle-subject .riddle-subject-no-photo {
		color: #333;
		font-size: 34upx;
		flex-grow: 1;
		display: flex;
		align-items: center;
	}

	.riddle-subject .riddle-topic>view:first-child {
		/* height: 78upx; */
		padding: 8upx 30upx;
		background: #39C65B;
		color: #fff;
		line-height: 42upx;
		font-size: 30upx;
		display: flex;
		align-items: center;
	}

	.riddle-subject .riddle-topic>view:nth-child(2) {
		border-color: #39C65B transparent transparent transparent;
		border-style: solid;
		border-bottom: transparent;
		border-width: 12upx;
		font-size: 0;
		height: 0px;
		line-height: 0;
		width: 0px;
		margin: 0 auto;
	}

	.riddle-subject .tip-answer {
		font-size: 24upx;
		height: 70upx;
		margin-bottom: 16upx;
	}
	.riddle-subject .tip-answer-photo {
		font-size: 24upx;
		height: 70upx;
		margin-bottom: 16upx;
		margin-top: 32upx;
	}

	.riddle-subject .tip-answer>view:first-child {
		color: #666;
		margin-top: 38upx;
	}

	.riddle-subject .tip-answer>view .riddle-tip {
		width: 24upx;
		height: 24upx;
		border-radius: 50%;
		background: #FDF121;
		border: 0.5px solid #00A66A;
		color: #F73015;
		font-size: 22upx;
		text-align: center;
		line-height: 24upx;
		position: absolute;
		bottom: 8upx;
		right: 0;
	}

	.riddle-result {
		width: 510upx;
		height: 360upx;
		margin: 0 auto;
		margin-top: 120upx;
	}

	.riddle-result .riddle-choose-result {
		height: 88upx;
		background: #fff;
		box-shadow: 0 4upx 0 2upx #13917C;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		color: #00A66A;
		font-size: 34upx;
		margin-top: 48upx;
		position: relative;
	}

	.riddle-result .riddle-choose-error {
		background: linear-gradient(to right, #FF793E, #FF4040);
		color: #FFFFFF;
		position: relative;
	}

	.riddle-result .riddle-choose-correct {
		background: linear-gradient(#39C812, #7BD326);
		color: #fff;
		position: relative;
	}
</style>
